<template>
<div class="home">
  <div class="col">
    <el-avatar class="avatar" shape="square" :size="108" :src="avararUrl" />
    <div class="desc">
      <span class="tip">{{hoursTip}}，admin</span>
      <span class="text">高级前端工程师 | xx公司 - IT部门</span>
    </div>
  </div>
  <el-main> 
    <div class="col2">
      <div class="box">
        <h3 class="tit">系统简介：</h3>
        <p class="text">集成了 vue3 + vite + typescript + element-plus 快速开发的多页签管理系统模板，
          递归组件实现的多级路由，添加页面路由自动生成菜单，支持配置 keepAlive 组件缓存，
          头部标签面包屑自动识别当前页面级别，自定义主题颜色配置
        </p>
      </div>
      <div class="box">
        <h3 class="tit">集成模块：</h3>
        <div class="text">
          <span class="h" >vue3</span>     vue3.X 更好的性能，组合式API,拥抱函数式组件开发 <el-icon class="select-icon"><Select /></el-icon>
        </div>
        <div class="text">
          <span class="h" >vite</span>   基于ESM按需编译,更快的打包工具 <el-icon class="select-icon"><Select /></el-icon>
        </div>
        <div class="text">
          <span class="h" >typescript</span>   增强js功能的超集，静态类型检测，更严谨规范 <el-icon class="select-icon"><Select /></el-icon>
        </div>
        <div class="text">
          <span class="h" >element-plus</span>   element-ui 的vue3版 <el-icon class="select-icon"><Select /></el-icon>
        </div>
      </div>

    </div>

    <div class="col3" style="margin-top:20px">
      <el-button type="primary" :icon="Download" @click="download">下载模板</el-button>
    </div>
  </el-main>
</div>

</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {Select,Download} from '@element-plus/icons-vue';


const avararUrl = "https://img0.baidu.com/it/u=4038009495,4255913521&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500"

const hoursTip = ref('')
const getMycount=()=>{
　　let date=new Date();
　　if(date.getHours()>=0&&date.getHours()<12){
　　　　hoursTip.value = "上午好"
　　}else if(date.getHours()>=12&&date.getHours()<18){
　　　　hoursTip.value = "下午好"
　　}else{
　　　　hoursTip.value = "晚上好"
　　}
}
getMycount();


const download = ()=>{
  window.open("/vue3-elplus-admin.zip")
}
</script>

<style lang="less" src="./home.less" scoped>
</style>